import React,{Component,Fragment} from 'react';
import TabBar from '../../commponents/TabBar/tabBar'
import CartImg from '../../assets/shopCart/cart.png'
import CartImg1 from '../../assets/iconfont/cart1.jpg'
import axios from 'axios';
import './cart.css'
export default class Cart extends Component{
    constructor(props){
        super(props);
        this.state={
            list:[],
            isLogin:true,   //登录状态
            isChecked:false, //是否选中当前商品
            goodsCount:1,    //商品数量
            isCheckedAll:true, //是否全选
            allPrice:0,
            showDel:false,
            emp:false
        }
    }

    componentDidMount(){
        this.getCartList();
    }

    getCartList = ()=>{
        axios.get('http://localhost:3000/api/cartList').then(res=>{
            this.setState({
                allPrice:parseFloat(res.data.price),
                list : [...res.data.message]
            });
            if(this.state.list.length == 0){
                this.setState({
                    emp:true
                })
            }
            let empArr = [];
            this.state.list.map((item,index)=>{
                empArr.push(item.is_checked);
                if(item.is_checked == 0){
                    this.setState({
                        isCheckedAll:false
                    })
                }
            });
            if(empArr.length > 0){
                let newVal = empArr.reduce((prev, cur, index, arr)=>{
                    return prev + cur;
                }); 
                if(newVal == this.state.list.length){
                    this.setState({
                        isCheckedAll:true
                    })
                }
            }
            
        })
    }

    showList = () => {
        if(this.state.list.length > 0){
            return this.state.list.map((item,index)=>{
                return (
                    <div key={index}>
                        <div className='cart-goods-lists'>
                            <div className='items'>
                                <div className='checkbox'>
                                    <i onClick={()=>{this.switchChecked(item.goods_id)}}
                                        className={item.is_checked?'check-icon current':'check-icon'}>
                                    </i>
                                </div>
                                <div className='item-img'>
                                    <img src={item.thumb_url} alt='' />
                                </div>
                                <div className='item-describe'>
                                    <div className='title'>{item.goods_name}</div>
                                    <span className='price'>￥{item.price}</span>
                                </div>
                                <div className='item-operate'>
                                    <i className='del-icon' onClick={()=>{this.delFruits(item.goods_id)}}></i>
                                    <div className='item-count'>
                                        <button className='minus-item' onClick={()=>{this.minusCount(item.goods_id)}}>-</button>
                                        <span className='item-value'>{item.buy_count}</span>
                                        <button className='add-item' onClick={()=>{this.addCount(item.goods_id)}}>+</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                )
            })
        }
    }

    //是否选中该商品
    switchChecked=(id)=>{
        axios.get('http://localhost:3000/api/isAdd',{
            params:{
                id:id
            }
        }).then(res=>{
            if(res.data.success_code){
                this.getCartList();
            }
        })
    }
    //增加加商品数量
    addCount=(id)=>{
        axios.get('http://localhost:3000/api/proCountAdd',{
            params:{
                id:id
            }
        }).then(res=>{
            if(res.data.success_code){
                this.getCartList();
            }
        })
    }
    //减少商品数量
    minusCount=(id)=>{
        axios.get('http://localhost:3000/api/proCountMinus',{
            params:{
                id:id
            }
        }).then(res=>{
            if(res.data.success_code){
                this.getCartList();
                if(res.data.count <= 0){
                    axios.get('http://localhost:3000/api/delFruits',{
                        params:{
                            id:id
                        }
                    }).then(res=>{
                        if(res.data.success_code){
                            this.getCartList();
                        }
                    })
                }
            }
            
        })
    }

    delFruits = (id)=>{
        sessionStorage.setItem('id',id);
        this.setState({
            showDel : true
        });
        
    }

    cancel = () => {
        this.setState({
            showDel : false
        });
    }

    delItems = () => {
        axios.get('http://localhost:3000/api/delFruits',{
            params:{
                id:sessionStorage.getItem('id')
            }
        }).then(res=>{
            if(res.data.success_code){
                this.getCartList();
                this.cancel()
            }
        })
    }

    //是否全选
    selectAll = () => {
        this.setState({
            isCheckedAll:!this.state.isCheckedAll
        })
        var checkStatus = null;
        if(this.state.isCheckedAll){
            checkStatus = 0
        }else{
            checkStatus = 1
        }
        axios.get('http://localhost:3000/api/selectAll',{
            params:{
                checkStatus : checkStatus
            }
        }).then(res=>{
            if(res.data.success_code){
                this.getCartList();
            }
        })
    }
    render(){
        if(this.state.emp){
            return(
                <Fragment>
                    <div className='cart-container'>
                        <img style={{'width':'30%','marginTop':'30px'}} src={CartImg} alt=''/>
                        <p style={{'color':'#999','fontSize':'13px','marginTop':'30px'}}>购物车空空的，快去逛逛吧！</p>
                        <button style={{'border':'none','marginTop':'30px','backgroundColor':'#fff','padding':'10px 40px','border':'1px solid #0eb27b','color':'#0eb27b','borderRadius':'10px'}}>去逛逛</button>
                    </div>
                    <TabBar />
                </Fragment>
            )
        }
        else{
            return(
                <Fragment>
                    <div className="mask" style={{display:this.state.showDel ? '' : 'none'}}>
                        <div className="del-content">
                            <p>您确定删除此商品吗？</p>
                            <div className="btns">
                                <button onClick = {this.delItems}>确定</button>
                                <button onClick = {this.cancel}>取消</button>
                            </div>
                        </div>
                    </div>
                    <div className='cart-container-logined' style={{color:'#000'}}>
                        <p>全场满100元包邮，已包邮</p>
                        {this.showList()}
                    </div>
                    <div className='balance-bar'>
                        <div className='check-all'>
                            <i className={this.state.isCheckedAll?'check-icon current':'check-icon'} 
                                onClick = {this.selectAll}></i>
                            全选
                        </div>
                        <div className='balance-describe'>
                            <p className='total-msg'>合计(不含运费):<span>￥{this.state.allPrice}</span></p>
                            <p className='benefit'>已优惠:<span>￥20.00</span></p>
                        </div>
                        <div className='balance-btn'>去结算</div>
                    </div>
                    <TabBar />
                </Fragment>
            )
        }
        
    }
}